<template>
    <div>
        <div style="height:15px"></div>
        <div class="wrap-head">
            课程名:
            <bk-select :disabled="false" v-model="selectvalue" class="bk-select"
                ext-cls="select-custom"
                ext-popover-cls="select-popover-custom"
                :value="option"
                @change="ChangeTable"
                searchable>
                <bk-option v-for="option in list"
                    :key="option.id"
                    :id="option.name"
                    :name="option.name">
                </bk-option>
            </bk-select>
            <bk-button :theme="'primary'" class="mr10" @click="visible.addcourse.isshow = true"> 创建课程</bk-button>
            <bk-button :theme="'primary'" class="mr10" @click="visible.deletcourse.isshow = true"> 删除课程</bk-button>
            <bk-button :theme="'primary'" class="mr10" @click="visible.altercourse.isshow = true"> 修改课程</bk-button>
            <!--这是新增课程的对话框-->
            <bk-dialog v-model="visible.addcourse.isshow"
                theme="primary"
                :header-position="visible.addcourse.headerPosition"
                :mask-close="false"
                ok-text="提交"
                :width="700"
                title="创建课程"
                @confirm="AddCourse">
                <div style="width: 600px;">
                    <bk-form :label-width="200" :model="formData" :rules="rules" ref="validateForm1">
                        <bk-form-item
                            label="课程名称"
                            :required="true"
                            :property="'coursename'"
                            :error-display-type="'normal'">
                            <bk-input v-model="formData.coursename" placeholder="请输入3到10个以内的字符，不能为admin"></bk-input>
                        </bk-form-item>
                        <bk-form-item
                            label="任课老师老师"
                            :required="true"
                            :property="'courseteacher'"
                            :error-display-type="'normal'">
                            <bk-input v-model="formData.courseteacher" placeholder="请输入3到10个以内的字符，不能为admin"></bk-input>
                        </bk-form-item>
                        <bk-form-item
                            label="创建人"
                            :required="true"
                            :property="'createtaecher'"
                            :error-display-type="'normal'">
                            <bk-input v-model="formData.createtaecher" placeholder="请输入3到10个以内的字符，不能为admin"></bk-input>
                        </bk-form-item>
                        <bk-form-item
                            label="课程简介"
                            :error-display-type="'normal'">
                            <bk-input type="textarea" v-model="formData.desc"></bk-input>
                        </bk-form-item>
                    </bk-form>
                </div>
            </bk-dialog>
            <!--这是删除课程的对话框-->
            <bk-dialog v-model="visible.deletcourse.isshow"
                theme="primary"
                :header-position="visible.deletcourse.headerPosition"
                :mask-close="false"
                ok-text="删除"
                :width="500"
                @confirm="DeletCourse"
                title="删除课程">
                <p>你确定要删除{{selectvalue}}课程吗</p>
            </bk-dialog>
            <!--这是修改课程的对话框-->
            <bk-dialog v-model="visible.altercourse.isshow"
                theme="primary"
                :header-position="visible.altercourse.headerPosition"
                :mask-close="false"
                ok-text="修改"
                :width="700"
                @confirm="AlterCourse"
                title="修改课程">
                <div style="width: 600px;">
                    <bk-form :label-width="200" :model="formData" :rules="rules" ref="validateForm1">
                        <bk-form-item
                            label="课程名称"
                            :required="true"
                            :property="'coursename'"
                            :error-display-type="'normal'">
                            <bk-input v-model="formData.coursename" placeholder="请输入3到10个以内的字符，不能为admin"></bk-input>
                        </bk-form-item>
                        <bk-form-item
                            label="任课老师老师"
                            :required="true"
                            :property="'courseteacher'"
                            :error-display-type="'normal'">
                            <bk-input v-model="formData.courseteacher" placeholder="请输入3到10个以内的字符，不能为admin"></bk-input>
                        </bk-form-item>
                        <bk-form-item
                            label="创建人"
                            :required="true"
                            :property="'createtaecher'"
                            :error-display-type="'normal'">
                            <bk-input v-model="formData.createtaecher" placeholder="请输入3到10个以内的字符，不能为admin"></bk-input>
                        </bk-form-item>
                        <bk-form-item
                            label="课程简介"
                            :error-display-type="'normal'">
                            <bk-input type="textarea" v-model="formData.desc"></bk-input>
                        </bk-form-item>
                    </bk-form>
                </div>
            </bk-dialog>
        </div>
        <div class="wrap-body">
            <bk-divider></bk-divider>
            <div class="wrap-body-header">
                学生信息:
                <bk-input
                    clearable
                    style="margin-top: 10px; width:200px;"
                    :placeholder="'搜索学生名称'"
                    :right-icon="'bk-icon icon-search'"
                    v-model="value"
                    @enter="enterSeacher"
                    @right-icon-click="handlerIconClick">
                </bk-input>
                <bk-button :theme="'primary'" class="mr10" @click="visible.addstu.isshow = true">增加成员</bk-button>
                <!--导入excel表格-->
                <form enctype="multipart/form-data" style="display:inline-block">
                    <input type="file" :value="stuexcel">
                    <input type="button" value="提交" @click="submitexcel">
                </form>
                <bk-dialog v-model="visible.addstu.isshow"
                    theme="primary"
                    :header-position="visible.addstu.headerPosition"
                    :mask-close="false"
                    ok-text="提交"
                    :width="700"
                    @change="addstudent"
                    title="新增成员">
                    <div style="600px">
                        <bk-form :label-width="200" :model="stuData" :rules="rules" ref="validateForm3">
                            <bk-form-item
                                label="学生姓名"
                                :required="true"
                                :property="'stuname'"
                                :error-display-type="'normal'">
                                <bk-input v-model="stuData.stuname" placeholder="请输入3到50个以内的字符，不能为admin"></bk-input>
                            </bk-form-item>
                            <bk-form-item
                                lable="学生学号"
                                :required="true"
                                :proprety="'stusno'"
                                :error-display-type="'normal'">
                                <bk-input v-model="stuData.stusno" placeholder="请输入3到50个以内的字符，不能为admin"></bk-input>
                            </bk-form-item>
                            <bk-form-item
                                label="所在专业"
                                :required="true"
                                :property="'studept'"
                                :error-display-type="'normal'">
                                <bk-input v-model="stuData.studept" placeholder="请输入3到50个以内的字符，不能为admin"></bk-input>
                            </bk-form-item>
                        </bk-form>
                    </div>
                </bk-dialog>
            </div>
            <bk-divider></bk-divider>
            <bk-table style="margin-top: 15px;"
                :data="data"
                size="small"
                :pagination="pagination"
                show-limit="false"
                @row-mouse-enter="handleRowMouseEnter"
                @row-mouse-leave="handleRowMouseLeave"
                @page-change="handlePageChange"
                @page-limit-change="handlePageLimitChange">
                <bk-table-column type="index" label="序列" width="100"></bk-table-column>
                <bk-table-column label="姓名" prop="name"></bk-table-column>
                <bk-table-column label="学号" prop="sno"></bk-table-column>
                <bk-table-column label="专业" prop="dept"></bk-table-column>
                <bk-table-column label="操作" width="150">
                    <template slot-scope="props">
                        <bk-button theme="primary" @click="() => {
                            props;
                            visible.deletstu.isshow = true
                        }">移除</bk-button>
                        <bk-dialog v-model="visible.deletstu.isshow"
                            theme="primary"
                            :header-position="visible.deletstu.headerPosition"
                            :mask-close="false"
                            ok-text="移除"
                            :width="500"
                            @confirm="DeletStu(props.row)"
                            title="移除">
                            你确定要将{{props.row.name}}移除该课程吗？
                        </bk-dialog>
                    </template>
                </bk-table-column>
            </bk-table>
        </div>
    </div>
</template>

<script>
    import { bkSelect, bkOption } from 'bk-magic-vue'

    export default {
        components: {
            bkSelect,
            bkOption
        },
        data () {
            return {
                selectvalue: '',
                value: '',
                list: [// 这是下拉框的选择，再页面完成加载时立即获取
                    { id: 1, name: '计算机组成原理', courseteacher: 'cuilaoshi', createtaecher: '创建人', desc: '这是课程简介' },
                    { id: 2, name: '网络原理', courseteacher: 'cuilaoshi', createtaecher: '创建人', desc: '这是课程简介' },
                    { id: 3, name: '软件工程导论', courseteacher: 'cuilaoshi', createtaecher: '创建人', desc: '这是课程简介' },
                    { id: 4, name: 'JSP', courseteacher: 'cuilaoshi', createtaecher: '创建人', desc: '这是课程简介' }

                ],
                visible: { // 这是对话框的显示控制
                    addcourse: {
                        isshow: false,
                        headerPosition: 'center'
                    },
                    deletcourse: {
                        isshow: false,
                        headerPosition: 'center'
                    },
                    altercourse: {
                        isshow: false,
                        headerPosition: 'center'
                    },
                    deletstu: {
                        isshow: false,
                        headerPosition: 'center'
                    },
                    addstu: {
                        isshow: false,
                        headerPosition: 'left'
                    }
                },
                formData: { // 操作课程时的数据存放在这里
                    coursename: '',
                    courseteacher: '',
                    createtaecher: '',
                    desc: ''
                },
                stuexcel: '',
                stuData: { // 这里需要学生的三个基本信息
                    stuname: 'cuiyvrong1',
                    stusno: '3190911031',
                    studept: '计算机专业'
                },
                rules: { // 对话框的提示规则
                    name: [
                        {
                            required: true,
                            message: '必填项',
                            trigger: 'blur'
                        },
                        {
                            min: 3,
                            message: function (val) {
                                return `${val}不能小于3个字符`
                            },
                            trigger: 'blur'
                        },
                        {
                            max: 50,
                            message: '不能多于50个字符',
                            trigger: 'blur'
                        },
                        {
                            validator: this.checkName,
                            message: '不能等于admin',
                            trigger: 'blur'
                        }
                    ]
                },
                data: [// 这是学生的成员信息，在页面加载完成时立即获取 后续可以改为空列表
                    {
                        name: 'cuiyvrong',
                        sno: '3190911031',
                        dept: '计算机'
                    },
                    {
                        name: 'cuiyvrong',
                        sno: '3190911031',
                        dept: '计算机'
                    },
                    {
                        name: 'cuiyvrong',
                        sno: '3190911031',
                        dept: '计算机'
                    },
                    {
                        name: 'cuiyvrong',
                        sno: '3190911031',
                        dept: '计算机'
                    },
                    {
                        name: 'cuiyvrong',
                        sno: '3190911031',
                        dept: '计算机'
                    },
                    {
                        name: 'cuiyvrong',
                        sno: '3190911031',
                        dept: '计算机'
                    },
                    {
                        name: 'cuiyvrong',
                        sno: '3190911031',
                        dept: '计算机'
                    },
                    {
                        name: 'cuiyvrong',
                        sno: '3190911031',
                        dept: '计算机'
                    },
                    {
                        name: 'cuiyvrong',
                        sno: '3190911031',
                        dept: '计算机'
                    },
                    {
                        name: 'cuiyvrong',
                        sno: '3190911031',
                        dept: '计算机'
                    }
                ],
                pagination: { // 这是分页的信息
                    current: 1, // 当前页
                    count: 100, // 返回数据的总条数
                    limit: 10// 每页显示多少条数据
                }
            }
        },
        created () {
            this.getList()
        },
        methods: {
            handlePageLimitChange () { // 这个是表格数据控制大小 后面直接取消
                console.log('handlePageLimitChange', arguments)
            },
            handlePageChange (page) { // 这是当前页数改变时触发的函数
                this.pagination.current = page
            },
            async getList () { // 在这里调用函数在页面加载完成时进行获取数据列表

            },
            AddCourse () { // 这里写增加课程的方法

            },
            DeletCourse () { // 这里写删除课程的方法

            },
            AlterCourse () { // 这里写修改课程的方法

            },
            ChangeTable () { // 在这里写下拉框值改变后的表格

            },
            enterSeach () { // 在这里写查询的操作

            },
            addstudent () { // 在这里写增加学生的操作

            },
            handleRes (response) { // 这个是表单提交时判断的函数
                if (response.id) {
                    return true
                }
                return false
            }
        }
    }
</script>

<style scoped>
    .wrap-head{
        display: table-cell;
        text-align: center;
        font-size: 24px;
        position: relative;
        padding-top: 0px;

    }
    .upLoad{
        display: inline-block;
        margin: 0px;
    }
    .mr10{
            margin-left: 10px;
        }
    .bk-select{
            display: inline-block;
            width: 250px;
            top:50%;
        }
    .wrap-body{
        margin-top: 24px;
        border: 1px ;
        font-size: 20px;
    }
    .wrap-body-header{
        vertical-align: middle;
    }
    .dot-menu {
        display: inline-block;
        vertical-align: middle;
    }
    .tippy-tooltip.dot-menu-theme {
        padding: 0;
    }
    .dot-menu-trigger {
        display: block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        border-radius: 50%;
        text-align: center;
        font-size: 0;
        cursor: pointer;
    }
    .dot-menu-trigger:hover {
        color: #3A84FF;
        background-color: #DCDEE5;
    }
    .dot-menu-trigger:before {
        content: "";
        display: inline-block;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background-color: currentColor;
        box-shadow: 0 -4px 0 currentColor, 0 4px 0 currentColor;
    }
    .dot-menu-list {
        margin: 0;
        padding: 5px 0;
        min-width: 50px;
        list-style: none;
    }
    .dot-menu-list .dot-menu-item {
        padding: 0 10px;
        font-size: 12px;
        line-height: 26px;
        cursor: pointer;
        &:hover {
            background-color: #eaf3ff;
            color: #3a84ff;
        }
    }
</style>
